<template>
<!-- 加载提示 -->
  <div class="loading" v-if="loading">
    <van-loading type="spinner" size="32px" color="#1989fa" vertical>
      回答加载中
    </van-loading>
  </div>
  <!-- 回答详情 -->
  <div class="detail" v-else>
    <!-- 头部图片标题 -->
    <div class="detail-head">
      <div class="detail-head-back" @click="back">
        <van-icon name="arrow-left" />
      </div>
      <h1 class="detail-head-title">{{ title }}</h1>
      <img class="detail-head-img" :src="image" alt="题图" />
      <div class="detail-head-bottom"></div>
    </div>
    <!-- 回答内容 -->
    <div v-html="body"></div>

    <!-- 所属合集 -->
    <div class="section" v-if="section" @click="toSection(section.id)">
      <div class="section-img">
        <img :src="section?.thumbnail" />
      </div>
      <div class="section-info">
        <span>本文来自</span>
        <h1>{{ section.name }} · 合集</h1>
      </div>
      <div class="section-icon">
        <van-icon name="arrow" />
      </div>
    </div>
    <!-- 底部 -->
    <van-tabbar v-model="active">
      <van-tabbar-item>
        <template #icon>
          <van-icon
            class="iconfont"
            class-prefix="zhi"
            name="fanhui"
            @click="back"
          />
        </template>
      </van-tabbar-item>
      <van-tabbar-item :badge="numConvert(comments)">
        <template #icon>
          <van-icon
            class="iconfont"
            class-prefix="zhi"
            name="pinglun"
            @click="showComments"
          />
        </template>
      </van-tabbar-item>
      <van-tabbar-item :badge="numConvert(popularity)">
        <template #icon>
          <van-icon class="iconfont" class-prefix="zhi" name="dianzan" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <template #icon>
          <van-icon class="iconfont" class-prefix="zhi" name="shoucang" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <template #icon>
          <van-icon class="iconfont" class-prefix="zhi" name="zhuanfa" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
    <!-- 评论 -->
    <DeatilComment :comments="comments" />
  </div>
</template>

<script>
import { onBeforeMount, provide, reactive, ref, toRefs } from 'vue'
import { getAnswerDetailAPI, getExtraInfoAPI } from '@/api'
import { numConvert } from '@/utils/numConvert'
import { useRoute, useRouter } from 'vue-router'
import DeatilComment from './DetailComment.vue'
export default {
  name: 'Deatil',
  components: { DeatilComment },
  setup() {
    const $route = useRoute()
    const $router = useRouter()
    const id = $route.params.id

    const state = reactive({
      title: '', // 回答的标题
      image: '', // 回答题图
      body: '', // 回答内容
      active: '', // 下方导航
      longComment: 0, //长评论总数
      popularity: 0, // 点赞总数
      shortComments: 0, // 短评论总数
      comments: 0, //评论总数
      section: {}, // 回答所属的主题合集,不一定有
      loading: true, // 回答详情是否加载完成
    })

    let show = ref(false) // 是否显示评论

    // 返回上一级
    const back = () => {
      $router.go(-1)
    }

    // 获取回答的点赞,评论数信息
    const getExtraInfo = async () => {
      const res = await getExtraInfoAPI(id)
      state.comments = res.data.comments
      state.popularity = res.data.popularity
      state.shortComments = res.data.short_comments
      state.longComment = res.data.long_comment
    }

    // 获取文章详情数据
    const getAnswerDetail = async () => {
      const res = await getAnswerDetailAPI(id)
      state.title = res.data.title
      state.image = res.data.image
      state.body = res.data.body
      state.section = res.data.section
      state.loading = false // 结束加载
    }

    // 显示评论页面
    const showComments = () => {
      show.value = !show.value
    }

    // 跳转到主题合集页面
    const toSection = (id)=>{
      $router.push({
        name: 'section',
        params: {
          id
        }
      })
    }

    onBeforeMount(() => {
      document.documentElement.scrollTop = 0 // 进入回答详情页面时滚到最顶部
      getExtraInfo()
      getAnswerDetail()
    })

    provide('show', show)
    provide('showComments', showComments)
    provide('id', id)

    return {
      ...toRefs(state),
      id,
      back,
      numConvert,
      showComments,
      toSection
    }
  },
}
</script>

<style lang='less' scoped>
.loading {
  width: 100%;
  height: 100vh;
  padding-top: 150px;
}
.detail {
  position: relative;
}
.detail-head {
  position: relative;
  width: 100%;
  height: 280px;
  overflow: hidden;
  &-back {
    display: none;
    position: absolute;
    left: 15px;
    top: 15px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
    /deep/ .van-icon {
      margin: 6px 0 0 6px;
      color: #fff;
    }
  }
  &-title {
    position: absolute;
    left: 15px;
    bottom: 20px;
    color: #fff;
    z-index: 9;
  }
  &-img {
    width: 100%;
  }
  &-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.3);
    filter: blur(5px);
  }
}
.iconfont {
  font-size: 18px;
  color: gray;
}
/deep/ .van-badge--top-right {
  left: 10px;
  background-color: #fff;
  color: gray;
}
.section {
  position: absolute;
  display: flex;
  bottom: 80px;
  width: 345px;
  height: 80px;
  margin: 0 15px;
  border-radius: 10px;
  background-color: #7f9063;
  &-img {
    position: relative;
    width: 100px;
    height: 80px;
    overflow: hidden;
    img {
      position: absolute;
      left: -10px;
      width: 85px;
      border-radius: 8px;
      transform: rotate(15deg);
    }
  }
  &-info {
    flex: 1;
    padding: 15px 10px;
    span {
      font-size: 14px;
      color: #ccc;
    }
    h1 {
      color: #fff;
    }
  }
  &-icon {
    padding: 30px 10px 0 0;
    /deep/ .van-icon {
      color: #ccc;
      font-size: 16px;
    }
  }
}
</style>